<template>

  <div class="head-container">
    <el-row>
      <el-col :span="8"><span class="title">2021年集客和包兑换</span></el-col>
      <el-col :span="8"
              :offset="8">
        <span class="content"
              v-if="isLogin">
          您好！{{nickname}} | 工号：{{username}}
          <el-button class="btn"
                     size="mini"
                     type="warning"
                     @click="toUserForm">个人信息</el-button>
          <el-button class="btn"
                     size="mini"
                     @click="logout">注销</el-button>
        </span>
        <span class="content"
              v-else>
          未登录<el-button class="btn"
                     size="mini"
                     type="success"
                     @click="login">登陆</el-button>
        </span>
      </el-col>
    </el-row>

  </div>

</template>

<script>
export default {
  name: 'HeadTab',
  data() {
    return {
    }
  },
  computed: {
    nickname() {
      if (window.sessionStorage.getItem('user')) {
        const user = JSON.parse(window.sessionStorage.getItem('user'))
        return user.nick_name
      } else {
        return ''
      }

    },
    username() {
      if (window.sessionStorage.getItem('user')) {
        const user = JSON.parse(window.sessionStorage.getItem('user'))
        return user.username
      } else {
        return ''
      }
    },
    isLogin() {
      return window.sessionStorage.getItem('uuid') ? true : false
    }
  },
  methods: {
    logout() {
      window.sessionStorage.removeItem('uuid')
      window.sessionStorage.removeItem('user')
      window.sessionStorage.removeItem('role')
      this.$router.push('/login')
    },
    login() {
      this.$router.push('/login')
    },
    toUserForm() {
      const userId = JSON.parse(window.sessionStorage.getItem('user')).id
      this.$router.push('/userForm?id=' + userId + '&isEdit=0')
    }
  },
}
</script>

<style lang="scss" scoped>
.head-container {
  width: 100%;
  height: 80px;
  text-align: left;
  color: #fff;
  background: #2d89f0;
  span {
    display: inline-block;
    line-height: 80px;
    margin-left: 3%;
  }
  .title {
    font-size: 1rem;
  }
  .btn {
    height: 40px;
    margin-left: 5px;
  }
}
</style>
